<template>
  <div class="app-container">
    <div class="filter-container" style="display: flex">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="right"
               label-width="100px" style="width: 50%">
        <el-form-item label="账户号" prop="account">
          <el-input v-model="editForm.account" placeholder="账户号"/>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
      </div>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#B3D8FD'}">
      <el-table-column fixed align="center" max-width="300" label="账户号" prop="account"/>
      <el-table-column align="center" min-width="100" label="当前余额(分为单位)" prop="balance"/>
    </el-table>
  </div>
</template>

<script>
  import {doGet, doPost} from '@/api'
  export default {
        name: "balance",

      data() {
          return {
            list: [],
            listLoading: false,
            editForm: {
              account: undefined
            },
            editFormRules: {
              account: [{required: true, message: '账户号不允许为空', trigger: 'blur'}]
            },
          }
      },

      methods: {
        // 获取余额列表
        getList() {
          this.listLoading = true
          doGet('balance.html?op=search', {account: this.editForm.account}).then(response => {
            this.list = response.rows
            this.listLoading = false
          }).catch(() => {
            this.list = []
            this.listLoading = false
          })
        },

        // 查询余额
        doQuery() {
          this.$refs['editForm'].validate(valid => {
            if (valid) {
              this.getList()
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
